<template>
   <div class="cmt-container">
        <h3>这是评论的内容</h3>
        <hr>                                 <!--v-model="msg" -->
        <textarea placeholder="最多能评论120个字" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postPinlun">发表评论</mt-button>
                                    <!-- @click="postPinlun" -->
        <div class="cmt-list">
           <!-- <div class="cmt-item" v-for="(item,i) in pinlunList" :key="item.add_time">
               <div class="cmt-title">
                   第{{ i +1 }}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间{{ item.add_time | dataFormat }}
               </div>
               <div class="cmt-body">
                   {{item.content === 'undefined'?'这个用户很懒，什么都没留下':item.content}}
               </div>             假设有数据的情况可以动态获取数据
           </div> -->
            <div class="cmt-item" v-for="(item,i) in pinlunList" :key="item.id">
               <div class="cmt-title">
                   第{{i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间{{item.add_time}}
               </div>
               <div class="cmt-body">
                   {{item.content}}
               </div>
           </div>        
        </div>
        <mt-button type="danger" size="large" plain >加载更多</mt-button> <!--  @click="getmore" -->
   </div>
   

</template>

<script>

import { Toast } from 'mint-ui'
export default {
   data(){
       return {
           pageindex:1,
           pinlunList:[
               {id:1,user_name:'锄禾',add_time: new Date(),content:'锄禾日当午'},
               {id:2,user_name:'清明',add_time: new Date(),content:'清明上河图'},
               {id:3,user_name:'复方',add_time: new Date(),content:'复方草珊瑚'},
               {id:4,user_name:'起舞',add_time: new Date(),content:'起舞弄清影'},
               {id:5,user_name:'弯弓',add_time: new Date(),content:'弯弓射大雕'},
               {id:6,user_name:'黄河',add_time: new Date(),content:'黄河入海流'}

           ],
           msg:''
       }
   },
   created() {
      
   },
   methods:{
        postPinlun(){
            if(this.msg.trim().length === 0 ){
              return  Toast('评论不能为空')
            }
            var cmt = {user_name:'匿名用户',add_time: new Date(),content:this.msg.trim()}
            this.pinlunList.unshift(cmt)
            this.msg = ''
        }
   },
   props:["id"]
}

//有数据情况下的方法
//import { Toast } from 'mint-ui'
//export default {
//    data(){
//        return {
//            pageindex:1,
//            pinlunList:[
//                {user_name:'锄禾',add_time: Date.now(),content:'锄禾日当午'},
//                {user_name:'清明',add_time: Date.now(),content:'清明上河图'},
//                {user_name:'复方',add_time: Date.now(),content:'复方草珊瑚'},
//                {user_name:'起舞',add_time: Date.now(),content:'起舞弄清影'},
//                {user_name:'弯弓',add_time: Date.now(),content:'弯弓射大雕'},
//                {user_name:'黄河',add_time: Date.now(),content:'黄河入海流'},
//
//            ],
//            msg:''
//        }
//    },
//    created() {
//        // this.getPinlun()
//    },
//    methods:{
//        // getPinlun(){            动态获取数据
//        //     this.$http.get('api/getcomments/'+ this.id +'?pageindex='+ this.pageindex)
//        //     .then(result =>{
//        //         if(result.body.status === 0){
//        //            为了防止数据被覆盖，调用的时候，用了concat方法，拼接数组
//        // this.pinlunList =this.pinlunList.concat(result.body.message)
//        //         }else {
//        //             Toast('获取评论数据失败')
//        //         }
//        //     })
//        // },
//        // getmore(){
//        //     this.pageindex++;
//        //     this.getPinlun();
//        // }
//       // postPinlun(){
//            //有数据的情况下
//            // if(this.msg.trim().length === 0){
//            //     return Toast('评论不能为空')
//            // }                                   // 获取页面的ID    //评论的内容
//            // this.$http.post('api/postcomment/'+$route.params.id,{content: this.msg.trim})
//            // .then(function (result) { 
//            //     if(result.body.status === 0){
//            //         //拼接成一个对象
//            //         var cmt = {user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()}
//            //         this.pinlunList.unshift(cmt)     //把评论放在评论区
//            //         this.msg = ''
//            //     }
//            //  })
//       // }
//      
//       
//    },
//    props:["id"]
//}
</script>

<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 16px;
    }
    textarea{
        height: 85px;
        font-size: 14px;
        margin: 0;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size: 13px;
            .cmt-title{
                line-height: 30px;
                background-color: #ccc;
            }
            .cmt-body{
                line-height: 35px;
                text-indent: 2em;
            }
        }
    }
    
   
}
</style>

